<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Raleway', sans-serif;
                font-weight: 100;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <h1 style="text-align: center;">websocket</h1>
        <h2 id="total" style="text-align: center;"></h2>
        <!-- <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>
                        <a href="{{ route('register') }}">Register</a>
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Documentation</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div> -->


    <div id="mess"></div>
    <div id="content">

    </div>
    <div style="position: fixed; bottom:10px">
        <input type="text" name="sub" id="sub"><button id="sen">发送</button>
    </div>
    </body>
    <script>
        function appchild(text){
            // 创建p节点  
             var para=document.createElement("p");  
             // 创建文本节点  
             var node=document.createTextNode(text);  
             // 把文本节点添加到p节点里  
             para.appendChild(node);  
                
             // 查找div1  
             var element=document.getElementById("content");  
             // 把p节点添加到div1里  
             element.appendChild(para);  

        }
        function getQueryString(name) { 
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
            var r = window.location.search.substr(1).match(reg); 
            if (r != null) return unescape(r[2]); 
            return null; 
        }
        // 获取id
        var personid = getQueryString('id');
        if(personid == null){
            // alert('非法操作');
            throw SyntaxError('非法操作');
        }
        var context = document.getElementById('content');
        // var goltext = 'kong';
        //发送
        document.getElementById('sen').onclick = function(e){
            var content = document.getElementById('sub').value;
            if (content == '') return false;
            appchild(personid + 'say: ' + content);
            goltext = personid + 'say: ' + content;
            document.getElementById('sub').value = '';
            // console.log(content);
        }

        console.log(personid);
        var mess = document.getElementById("mess");
        if(window.WebSocket){
            var ws = new WebSocket('ws://127.0.0.1:8001');

            ws.onopen = function(e){
                console.log("连接服务器成功");
                ws.send(JSON.stringify({
                    'type':'link',
                    'id':personid,
                    'name':personid
                }));
            }
            ws.onclose = function(e){
                console.log("服务器关闭");
            }
            ws.onerror = function(){
                console.log("连接出错");
            }

            ws.onmessage = function(e){
                var data = JSON.parse(e.data);
                if(data.type == 'onlinenumber'){
                    document.getElementById('total').innerHTML = '在线人数'+data.total;
                }
                if(data.type == 'talk'){
                    appchild(JSON.parse(e.data).text);
                }
                var time = new Date();
                // mess.innerHTML+=time+"的消息："+e.data+"<br>";
                // appchild(e.data);
                //发送
                document.getElementById('sen').onclick = function(e){
                    // 判断socket状态
                    console.log(ws.readyState);
                    if(!ws || ws.readyState != 1){
                        alert('重新登录');
                        return false;
                    }


                    var content = document.getElementById('sub').value;
                    if (content == '') return false;
                    // appchild(personid + 'say: ' + content);
                    goltext = personid + 'say: ' + content;
                    document.getElementById('sub').value = '';
                    // ws.send(personid + 'say: ' + content);
                    ws.send(JSON.stringify({
                        'type':'talk',
                        'name':personid,
                        'id':personid,
                        'text':content
                    }))
                    // console.log(content);
                }
            }
        }
    </script>









</html>
